<template>
	<view class="main">
		<u-navbar :is-back="true" :title="i18n.navbar.cash_flow" :background="background" :border-bottom="false" title-color="#000000"
			back-icon-color="#000">
			<view class="navright" slot="right">
				<image src="../../../static/images/sx.png" mode="" @click="filters"></image>
			</view>
		</u-navbar>

		<scroll-view  scroll-y :style="{'height':vHeight + 'px'}" @scrolltolower="reachBottom" class="alls">
			<view class="day"  v-for="(item, index) in listData" :key="index">
				<view class="day_tit">
					<text class="tit">{{i18n.capital_flow.time}}: </text>
					<text>{{item.createTime}}</text>
				</view>
				<view class="day_tit">
					<text class="tit">{{i18n.capital_flow.orderid}}:</text>
					<text>{{item.orderNo}}</text>
				</view>
				<view class="day_tit">
					<text class="tit">{{i18n.capital_flow.info}}:</text>
					<text>{{item.nickName}}</text>
				</view>
				<view class="status">
					<view class="stat_tit">
						<view class="tit">
							{{i18n.capital_flow.type}}:
						</view><text>{{item.type == 'pay_order'?i18n.capital_flow.pay_order:i18n.capital_flow.refund_order }}</text>
					</view>
					<view class="tit">
						{{i18n.capital_flow.money}}:<text class="stat_money">{{ item.pm === 1 ? item.amount : -item.amount }}</text>
					</view>
				</view>
				<view class="day_tit">
					<text class="tit">{{i18n.capital_flow.remark}}:</text>
					<text>{{item.mark}}</text>
				</view>
			</view>
			<u-loadmore :status="status" :load-text="i18n.commission_details.loadText"/>
		</scroll-view>

		<u-popup v-model="filter" mode="right" width="590">
			<view class="showright">
				<view class="scree_tit">
					{{i18n.capital_flow.Filter_tit}}
				</view>
				<view class="smtit">
					{{i18n.capital_flow.Time_selection}}
				</view>
				<view class="timechoose">
					<view :class="index==timer?'perioed':'period'" v-for="(item,index) in i18n.capital_flow.selecttime" :key="index"
						@click="choosed(index)">
						{{item}}
					</view>
				</view>
				<view class="option_time">
					<view class="time_l">
						<view>
							{{i18n.capital_flow.start_time}}
						</view>
						<image src="../../../static/images/time.png" mode=""></image>
					</view>
					<view class="heng">

					</view>
					<view class="time_l">
						<view>
							{{i18n.capital_flow.end_time}}
						</view>
						<image src="../../../static/images/time.png" mode=""></image>
					</view>
				</view>


				<view class="smtit">
					{{i18n.capital_flow.keyword}}
				</view>
				<view class="selects">
					<input type="text" v-model="orderNo" :placeholder="i18n.capital_flow.input.placeholder" />
				</view>
				<view class="rightbut">
					<view class="rightconfim" @click="resetForm">
						{{i18n.bill_manage.reset}}
					</view>
					<view class="rightoff" @click="submitForm">
						{{i18n.bill_manage.confirm}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				filter: false,
				timer: 0,
				orderNo: '',
				dateLimit: '',
				listData: [],
				currentPage: 0,
				totalPage: 0,
				status: 'loadmore',
				vHeight: 450,
			}
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
		},
		onShow(){
			this.lang();
			uni.getSystemInfo({
				success: (res) => {
					this.vHeight = res.windowHeight - 44;
					console.log(res.windowHeight);
				}
			});
			this.getListData();
		},
		methods: {
			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},

			reachBottom() {
				this.getListData();
			},
			resetForm() {
				this.timer = 0;
				this.dateLimit = ""; 
				this.orderNo = "";
			},
			submitForm(){
				this.filter = false; 
				this.listData = [];
				this.currentPage = 0;
				this.totalPage = 0;
				this.getListData();
			},
			getListData() {
				this.status = 'loading';
				if(this.currentPage>0 && this.totalPage>0 && this.currentPage>=this.totalPage){
					this.status = 'nomore';
					return
				}
				global.$http.request({
					url: '/api/admin/merchant/finance/monitor/list',
					header: {
							'Authori-zation':  uni.getStorageSync('token') //自定义请求头信息
						},
					method: 'GET',
					data:{
						page: this.currentPage+1,
						dateLimit:this.dateLimit,
						orderNo:this.orderNo
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.listData = this.listData.concat(res.data.data.list);
						this.currentPage = res.data.data.page;
						this.totalPage = res.data.data.totalPage;
						if(this.currentPage>=this.totalPage){
							this.status = 'nomore';
						}else{
							this.status = 'loadmore';
						}
					}
				})
			},
			
			//筛选栏展开
			filters() {
				this.filter = true
			},
			//日期选中状态
			choosed(index) {
				this.timer = index;
				switch (index) {
				  case 0: this.dateLimit = ""; 
				  break; 
				  case 1: this.dateLimit = "today"; 
				  break; 
				  case 2: this.dateLimit = "yesterday"; 
				  break; 
				  case 3: this.dateLimit = "lately7"; 
				  break; 
				  case 4: this.dateLimit = "lately30"; 
				  break; 
				  case 5: this.dateLimit = "month"; 
				  break; 
				  case 6: this.dateLimit = "year"; 
				  break; 
				}
			},


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding-bottom: 130rpx;
		padding-bottom: 130rpx;

		.main {
			width: 750rpx;
			height: 100%;

			.navright {
				padding-right: 30rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.alls {
				.day {
					margin-top: 10rpx;
					background-color: #fff;
					padding: 30rpx 31rpx 4rpx 31rpx;

					.day_tit {
						padding-bottom: 27rpx;
						display: flex;
						align-items: center;
						
						.tit {
							// width: 135rpx;
							display: block;
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #000000;
							padding-right: 10px;
						}

						text {
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #4D4D4D;
						}
					}

					.status {
						padding-bottom: 26rpx;
						display: flex;
						justify-content: space-between;
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #000000;
					
						text {
							color: #4D4D4D;
						}

						.stat_tit {
							display: flex;

							view {
								padding-right: 10px;
							}
						}

						.stat_money {
							color: #FF0000;
							padding-left: 10px;
						}

						.stat_but {
							margin-top: 11rpx;
							width: 154rpx;
							height: 48rpx;
							background: #0F82FF;
							border-radius: 24rpx;
							text-align: center;
							line-height: 48rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}
					}

					.cost {
						padding-bottom: 27rpx;
						display: flex;
						align-items: center;

						view {
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #000000;
						}

						text {
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FF0000;
						}
					}

					.cost2 {
						display: flex;
						align-items: center;

						view {
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #000000;
						}

						text {
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FF0000;
						}
					}

					.allmoney {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.details {
							width: 154rpx;
							height: 48rpx;
							text-align: center;
							line-height: 48rpx;
							background: #0F82FF;
							border-radius: 24rpx;

							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}

						.cost {
							display: flex;
							align-items: center;

							view {
								font-size: 26rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #000000;
							}

							text {
								font-size: 26rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #FF0000;
							}
						}
					}
				}






			}

			.showright {
				padding-left: 14rpx;

				.scree_tit {
					padding: 78rpx 0 64rpx 0;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}


				.smtit {
					padding-bottom: 23rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.selects {
					padding: 30rpx 10rpx;
					margin: 0 15rpx 65rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: #F0F0F0;
					border-radius: 10rpx;

					text {

						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #B3B3B3;
					}

					input {
						width: 100%;
						// background: #F0F0F0;
						// border-radius: 10rpx;
					}

					image {
						width: 10rpx;
						height: 16rpx;
					}
				}

				.timechoose {
					margin: 20rpx 0;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;

					text-align: center;
					line-height: 98rpx;

					.period {
						margin-right: 11rpx;
						margin-bottom: 10rpx;
						height: 98rpx;
						background: #F0F0F0;
						border-radius: 10rpx;
						color: #999999;
						padding: 0 20rpx;
					}

					.perioed {
						margin-right: 11rpx;
						margin-bottom: 10rpx;
						
						height: 98rpx;
						background: #304156;
						border-radius: 10rpx;
						color: #FFFFFF;
							padding: 0 20rpx;
					}
				}

				.option_time {
					display: flex;
					align-items: center;
					// padding: 36rpx 0;
					margin-bottom: 79rpx;

					.time_l {
						width: 244rpx;
						height: 98rpx;
						background: #F0F0F0;
						border-radius: 10rpx;
						line-height: 98rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						view {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #B3B3B3;
							padding-left: 11rpx;
						}

						image {
							width: 61rpx;
							height: 96rpx;
						}
					}

					.heng {
						margin: 0 9rpx;
						width: 32rpx;
						height: 2rpx;
						background: #333333;
					}
				}




				.rightbut {
					margin-top: 400rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 34rpx;
					font-family: PingFang SC;
					line-height: 92rpx;
					text-align: center;
					padding: 0 25rpx;

					.rightconfim {
						width: 240rpx;
						height: 92rpx;
						border: 2rpx solid #999999;
						border-radius: 46rpx;
						font-weight: 400;
						color: #999999;
					}

					.rightoff {
						width: 240rpx;
						height: 92rpx;
						background: #304156;
						border-radius: 46rpx;

						color: #FFFFFF;

					}
				}
			}
		}
	}
</style>
